<template>
	<view>
		<!-- 列表显示 -->
		<view class="searchBox">
			<uni-search-bar focus="true" v-model="value"  @input="input" :radius="100" cancelButton='none'  ></uni-search-bar>
		</view>
		<!-- 列表显示 -->
		<view class="searchList" v-if="shopList.length!==0" >
				<view class="searchList-item" v-for="(item,index) in shopList" :key='item.goods_id' @click="setdeitl(item.goods_id)">
					<view class="goods_name">{{item.goods_name}}</view>
					<uni-icons class='arrowright'  type="arrowright" size="16"></uni-icons>
				</view>
		</view>
		<!--历史记录 -->
		<view class="history-box" v-else >
				<!-- 标题 -->
				<view class="history_tielt">
					<view>历史记录</view>
					<uni-icons @click="revomHistory"  type="trash" size="20"></uni-icons>
				</view>
				<!-- 列表 -->
				<view class="historyList">
					<uni-tag @click='setValue(item)'  :text="item" v-for="(item,index) in historyList" :key='index'></uni-tag>
				</view>
		</view>
		<!-- 删除历史记录提示框 -->
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog title="确定要删除所有历史记录?" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer:null,//定时器
				value:'',
				shopList:[],//搜索结果列表
				historyList:[]//搜索历史列表
			};
		},
		methods:{
			input(e){
				const than=this
				clearTimeout(this.timer)
				this.timer=setTimeout(()=>{
					than.value=e
					if(than.value!==''){
						than.getqyuer();
						than.sethistor();
					}
					than.shopList=[]
				},500)
			},
			getqyuer(){
				const than=this
				uni.$http.get('/api/public/v1/goods/qsearch?query='+this.value).then(result=>{
				than.shopList=result.data.message
				})
			},
			sethistor(){
				if(this.historyList.indexOf(this.value)==-1){
					for(var i in this.historyList){
						if(this.historyList[i]===this.value){
							return
						}
					}
					this.historyList.unshift(this.value)
				}
			},
			setdeitl(id){
					uni.navigateTo({
						url:'../goods_detail/goods_detail?goods_id='+id
					})
			},
			setValue(text){
				this.value=text;
				this.getqyuer();
			},
			revomHistory(){
				this.$refs.popup.open()
			},
			close() {
			    this.$refs.popup.close()
			},
		    confirm() {
				this.historyList=[]
			    this.$refs.popup.close()
	        }
		}
	}
</script>

<style lang="scss">
.searchBox{position: sticky;top:0;z-index: 99;}
.searchList-item{position:relative;padding:20rpx;border-bottom:1rpx #ccc solid;}
.goods_name{
			font-size:28rpx;
			/*强制文字在一行文本框内*/
			white-space: nowrap;
			/*溢出部分文字隐藏*/
			overflow: hidden;
			/*溢出部分省略号处理*/
			text-overflow: ellipsis;
}
.arrowright{position: absolute;right:10rpx;top:50%;transform: translateY(-50%);}
.history_tielt{display: flex;justify-content:space-between;padding:20rpx;border-bottom:2rpx #ccc solid;}
.historyList{display: flex;flex-wrap: wrap;uni-tag{margin:10rpx}}
</style>
